<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import systemModuleApi from '@/api/systemModuleApi'
const route = useRoute()
const show4 = ref(1)

const show4fun =() =>{
  let flag= show4.value
  if(flag==1){
    show4.value=2
  }else if(flag==2){
    show4.value=3
  }else{
    show4.value=1
  }
}
// 获取数据
const showMessage = () => {
  systemModuleApi.getList().then(res => {
    alert(JSON.stringify(res))
  }).catch(err => {
    alert(JSON.stringify(err))
  })
}
//
let items = ref(Array.apply(null, { length: 20 }).map(() => {
  let idx = Math.floor(Math.random()* 99)
  return  {id: idx, number: 'AB>>'+ idx}
}))

const testList = ref(
  Array.apply(null, { length: 81 }).map((_, index) => ({
    id: index,
    // 每 9 个为一组
    number: (index % 9) + 1,
  }))
)

/**
 * 将数组内的元素，随机打乱顺序
 */
const shuffleArray = () => {
  let result = [], random
  while(testList.value.length > 0){
    random = Math.floor(Math.random() * testList.value.length)
    result.push(testList.value[random])
    testList.value.splice(random, 1)
  }
  testList.value = result
}
//
const shuffle = () => {
  let result = [], random
  while(items.value.length > 0){
    random = Math.floor(Math.random() * items.value.length)
    result.push(items.value[random])
    items.value.splice(random, 1)
  }
  items.value = result
}
</script>
<template>
  <div>
    Hello I am WorkPlatform
    <a-button type="primary" @click="showMessage">Get Data</a-button>
    <hr>
    {{ route.path }}
    <!-- <p v-for=" (item, idx) in route" :key="idx">
      {{ item }}
    </p> -->
    <hr>
    <div>
      <button @click="shuffle">Shuffle</button>
      <transition-group class="wraps" name="mmm" tag="ul">
        <li v-for="item in items" :key="item.id" class="cell">{{ item.number }}</li>
      </transition-group>
    </div>
    <hr>
    <div>
      <button @click="shuffleArray">
        随机打乱数组内元素的顺序
      </button>

      <transition-group name="mmm" mode="out-in" tag="ul" class="list-wraps">
        <!-- 一定要绑定 key，否则会不生效 -->
        <li v-for="item in testList" :key="item.id" class="list-cell">
          {{ item.number }}
        </li>
      </transition-group>
    </div>
    <div>
      <p>Click to cycle througth states：<button @click="show4fun()">cycle</button></p>
      <transition name="cycle" mode="out-in">
        <div v-if="show4=='1'">AAA</div>
        <div v-else-if="show4=='2'">BBB</div>
        <div v-else>CCC</div>
      </transition>
    </div>
  </div>
</template>
<style lang="less" scoped>
.wraps {
    display: flex;
    flex-wrap: wrap;
    width: calc(25px * 10 + 9px);
    .cell {
        width: 25px;
        height: 25px;
        border: 1px solid #ccc;
        list-style-type: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.mmm-move {
    transition: transform 0.8s ease;
}
.list-wraps {
  display: flex;
  flex-wrap: wrap;
  // 每 9 个一排
  width: calc(25px * 10 + 9px);
  .list-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid #86bbec;
    list-style-type: none;
  }
}
.cycle-enter-active,.cycle-leave-active{
  transition: all 0.5s;
}
.cycle-enter-from,.cycle-leave-to{
  transform: translateY(-20px);
  opacity: 0;
}
.cycle-enter-to,.cycle-leave-from{
  transition: all 0.5s;
}
</style>